<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Go-CapCut API 演示</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/style.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="header">
            <h3>Go-CapCut API 演示</h3>
            <p class="text-muted">使用Go语言实现的CapCut API服务</p>
        </div>
        
        <div class="alert alert-info">
            <strong>当前草稿ID:</strong> <span id="draftIdDisplay">尚未创建</span>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>创建草稿</h5>
                    </div>
                    <div class="card-body">
                        <form id="createDraftForm">
                            <div class="mb-3">
                                <label for="width" class="form-label">宽度</label>
                                <input type="number" class="form-control" id="width" value="1280">
                            </div>
                            <div class="mb-3">
                                <label for="height" class="form-label">高度</label>
                                <input type="number" class="form-control" id="height" value="720">
                            </div>
                            <div class="mb-3">
                                <label for="fps" class="form-label">帧率</label>
                                <input type="number" class="form-control" id="fps" value="30">
                            </div>
                            <button type="submit" class="btn btn-primary">创建草稿</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>添加视频</h5>
                    </div>
                    <div class="card-body">
                        <form id="addVideoForm">
                            <div class="mb-3">
                                <label for="videoUrl" class="form-label">视频URL</label>
                                <input type="text" class="form-control" id="videoUrl" placeholder="http://example.com/video.mp4">
                            </div>
                            <div class="mb-3">
                                <label for="videoStartTime" class="form-label">开始时间（秒）</label>
                                <input type="number" class="form-control" id="videoStartTime" value="0">
                            </div>
                            <div class="mb-3">
                                <label for="videoDuration" class="form-label">持续时间（秒）</label>
                                <input type="number" class="form-control" id="videoDuration" value="0">
                            </div>
                            <button type="submit" class="btn btn-primary">添加视频</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>添加音频</h5>
                    </div>
                    <div class="card-body">
                        <form id="addAudioForm">
                            <div class="mb-3">
                                <label for="audioUrl" class="form-label">音频URL</label>
                                <input type="text" class="form-control" id="audioUrl" placeholder="http://example.com/audio.mp3">
                            </div>
                            <div class="mb-3">
                                <label for="audioStartTime" class="form-label">开始时间（秒）</label>
                                <input type="number" class="form-control" id="audioStartTime" value="0">
                            </div>
                            <div class="mb-3">
                                <label for="audioDuration" class="form-label">持续时间（秒）</label>
                                <input type="number" class="form-control" id="audioDuration" value="0">
                            </div>
                            <div class="mb-3">
                                <label for="audioVolume" class="form-label">音量（0-100）</label>
                                <input type="number" class="form-control" id="audioVolume" value="100">
                            </div>
                            <button type="submit" class="btn btn-primary">添加音频</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>添加文本</h5>
                    </div>
                    <div class="card-body">
                        <form id="addTextForm">
                            <div class="mb-3">
                                <label for="text" class="form-label">文本内容</label>
                                <input type="text" class="form-control" id="text" placeholder="输入文本内容">
                            </div>
                            <div class="mb-3">
                                <label for="textStartTime" class="form-label">开始时间（秒）</label>
                                <input type="number" class="form-control" id="textStartTime" value="0">
                            </div>
                            <div class="mb-3">
                                <label for="textDuration" class="form-label">持续时间（秒）</label>
                                <input type="number" class="form-control" id="textDuration" value="5">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="textX" class="form-label">X位置（0-1）</label>
                                        <input type="number" class="form-control" id="textX" value="0.5" step="0.1">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="textY" class="form-label">Y位置（0-1）</label>
                                        <input type="number" class="form-control" id="textY" value="0.5" step="0.1">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="fontSize" class="form-label">字体大小</label>
                                        <input type="number" class="form-control" id="fontSize" value="30">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="textColor" class="form-label">颜色</label>
                                        <input type="color" class="form-control" id="textColor" value="#FFFFFF">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">添加文本</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>添加图片</h5>
                    </div>
                    <div class="card-body">
                        <form id="addImageForm">
                            <div class="mb-3">
                                <label for="imageUrl" class="form-label">图片URL</label>
                                <input type="text" class="form-control" id="imageUrl" placeholder="http://example.com/image.jpg">
                            </div>
                            <div class="mb-3">
                                <label for="imageStartTime" class="form-label">开始时间（秒）</label>
                                <input type="number" class="form-control" id="imageStartTime" value="0">
                            </div>
                            <div class="mb-3">
                                <label for="imageDuration" class="form-label">持续时间（秒）</label>
                                <input type="number" class="form-control" id="imageDuration" value="5">
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="imageX" class="form-label">X位置（0-1）</label>
                                        <input type="number" class="form-control" id="imageX" value="0.5" step="0.1">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="imageY" class="form-label">Y位置（0-1）</label>
                                        <input type="number" class="form-control" id="imageY" value="0.5" step="0.1">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="imageWidth" class="form-label">宽度（0-1）</label>
                                        <input type="number" class="form-control" id="imageWidth" value="0.3" step="0.1">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="imageHeight" class="form-label">高度（0-1）</label>
                                        <input type="number" class="form-control" id="imageHeight" value="0.3" step="0.1">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">添加图片</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>保存草稿</h5>
                    </div>
                    <div class="card-body">
                        <form id="saveDraftForm">
                            <p class="text-muted mb-3">点击下方按钮保存草稿并生成下载链接</p>
                            <button type="submit" class="btn btn-success">保存草稿</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header">
                <h5>响应结果</h5>
            </div>
            <div class="card-body">
                <div id="response" class="alert alert-info">等待操作...</div>
            </div>
        </div>
        
        <div class="footer">
            <p>Go-CapCut API 演示 &copy; 2023</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/app.js"></script>
</body>
</html>